<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css" media="all">
<style>
    <style type="text/css">
        *{
            padding: 0;
            margin-bottom:0;
            border: 0;
        }
        .box{
            width: 640px;
            height: 50px;
            overflow-x: scroll;
            overflow-y: hidden;
        }
        ul{
            display:inline;
            white-space: nowrap;
        }
        ul li{
            padding: 10px 200px;
            display: inline-block;
            background:pink;
            white-space:nowrap;
        }
    </style>

</head>

<body>
<script src="/plugins/layui/extend/modules/echarts/echarts.js"></script>
<script src="/plugins/layui/layui.js"></script>

<div id="main"></div>
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
    <div id="workInfoByMounthDiv" style="width: 90%;height:400px;">
	</div>
	<div id="salaryInfoByMounthDiv" style="width: 90%;height:400px;">
	</div>
</body>
<script type="text/javascript">
layui.use(['layer', 'table'], function () {
	var $ = layui.jquery;
	var table = layui.table;
	//http://172.16.200.110:30111/pms/core//rp/workInfoByMounth
	//var basePath = "http://172.16.200.110:30111/pms/core/"
	
	var basePath = getQueryStr('basePath');
	var salaryInfoByMounthUrl = basePath+"rp/salaryInfoByMounth";
    var workInfoByMounthUrl = basePath+"rp/workInfoByMounth";
    salaryInfoByMounth();
    workInfoByMounth();
    
    function salaryInfoByMounth() {
        $.ajax({
            cache: true,
            type: "POST",
            url: salaryInfoByMounthUrl, // 数据接口
            data: {},// 你的formid
            async: false,
            error: function (request) {
            },
            success: function (da) {
                console.log(da);
                salaryInfoByMounthBar(da);
            }
        });
    }; 
    
    function salaryInfoByMounthBar(data) {
        var dom = document.getElementById("salaryInfoByMounthDiv");
        var myChart = echarts.init(dom,'light');
        var app = {};
        option = null;
        option = {
        	color: ['#ff1c97'],
       		title: {
                   text: '工资统计'
             },
             toolbox: {
                 feature: {
                     magicType: {
                         type: ['bar', 'line']
                     },	
                     restore: {},
                     dataView: {
                    	 readOnly: false,
                    	 optionToContent: function(opt) {
                    		    var axisData = opt.xAxis[0].data;
                    		    var series = opt.series;
                    		    var table = '<table style="width:100%;text-align:center" class="layui-table" ><tbody><tr>'
                    		                 + '<td>年份</td>'
                    		                 + '<td>' + "月份" + '</td>'
                    		                 + '<td>' + "实发工资" + '</td>'
                    		                 + '<td>' + "应交个税" + '</td>'
                    		                 + '</tr>';
                		         data.map(function (item) {
                    		        table += '<tr>'
                    		                 + '<td>' + item.年份 + '</td>'
                    		                 + '<td>' + item.月份 + '</td>'
                    		                 + '<td>' + item.实发工资 + '</td>'
                    		                 + '<td>' + item.应交个税 + '</td>'
                    		                 + '</tr>';
                		         });
                    		    table += '</tbody></table>';
                    		    return table;
                    		}
                     }
                 }
             },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : data.map(function (item) {
                        return item.年份+"年"+item.月份+"月";
                    }),
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                	name:'实发工资',
                    type : 'value'
                },
                {
                    name:'应交个税',
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'实发工资',
                    type:'bar',
                    label:true,
                    barWidth: '15%',
                    data:data.map(function (item) {
                        return item.实发工资;
                    })
                },
                {
                    name:'应缴个税',
                    type:'bar',
                    label:true,
                    barWidth: '15%',
                    data:data.map(function (item) {
                        return item.应交个税;
                    })
                }
            ]
        };
        console.log(option);
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
    
    
    function workInfoByMounth() {
        $.ajax({
            cache: true,
            type: "POST",
            url: workInfoByMounthUrl, // 数据接口
            data: {},// 你的formid
            async: false,
            error: function (request) {
            },
            success: function (da) {
                console.log(da);
                workInfoByMounthBar(da);
            }
        });
    };
    
    
    function workInfoByMounthBar(data) {
        var dom = document.getElementById("workInfoByMounthDiv");
        var myChart = echarts.init(dom,'light');
        var app = {};
        option = null;
        option = {
        	color: ['#ff1c97'],
       		title: {
                   text: '工时统计'
             },
             toolbox: {
                 feature: {
                     magicType: {
                         type: ['bar', 'line']
                     },	
                     restore: {},
                     dataView: {
                    	 readOnly: false,
                    	 optionToContent: function(opt) {
                    		    var axisData = opt.xAxis[0].data;
                    		    var series = opt.series;
                    		    var table = '<table style="width:100%;text-align:center" class="layui-table" ><tbody><tr>'
                    		                 + '<td>年份</td>'
                    		                 + '<td>' + "月份" + '</td>'
                    		                 + '<td>' + "加班1.5(H)" + '</td>'
                    		                 + '<td>' + "加班2(H)" + '</td>'
                    		                 + '<td>' + "加班3(H)" + '</td>'
                    		                 + '</tr>';
                		         data.map(function (item) {
                    		        table += '<tr>'
                    		                 + '<td>' + item.年份 + '</td>'
                    		                 + '<td>' + item.月份 + '</td>'
                    		                 + '<td>' + item['加班1.5(H)'] + '</td>'
                    		                 + '<td>' + item['加班2(H)'] + '</td>'
                    		                 + '<td>' + item['加班3(H)'] + '</td>'
                    		                 + '</tr>';
                		         });
                    		    table += '</tbody></table>';
                    		    return table;
                    		}
                     }
                 }
             },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : data.map(function (item) {
                        return item.年份+"年"+item.月份+"月";
                    }),
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                	name:'实出勤天数',
                    type : 'value'
                },
                {
                    name:'',
                    type : 'value'
                },
                {
                    name:'',
                    type : 'value'
                },
                {
                    name:'',
                    type : 'value'
                }
            ],
            series : [
            	{
                    name:'实出勤天数',
                    type:'bar',
                    label:true,
                    barWidth: '15%',
                    data:data.map(function (item) {
                        return item['实出勤天数'];
                    })
                },
                {
                    name:'加班1.5(H)',
                    type:'bar',
                    label:true,
                    barWidth: '15%',
                    data:data.map(function (item) {
                        return item['加班1.5(H)'];
                    })
                },
                {
                    name:'加班2(H)',
                    type:'bar',
                    label:true,
                    barWidth: '15%',
                    data:data.map(function (item) {
                        return item['加班2(H)'];
                    })
                },
                {
                    name:'加班3(H)',
                    type:'bar',
                    label:true,
                    barWidth: '15%',
                    data:data.map(function (item) {
                        return item['加班3(H)'];
                    })
                }
            ]
        };
        console.log(option);
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
    
    function getQueryStr(sArgName) {
    	var LocString = window.location.href;
        var args = LocString.split("?");
        var retval = "";
        if (args[0] == LocString) {
            return retval;
        }
        var str = args[1];
        args = str.split("&");
        for (var i = 0; i < args.length; i++) {
            str = args[i];
            var arg = str.split("=");
            if (arg.length <= 1) continue;
            if (arg[0] == sArgName) retval = arg[1];
        }
        return retval;
    }

});
</script>

</html>